<script setup lang="ts">
import { getAlarmListApi, setReadFlag, setAllReadApi } from '@/services/alarm'
import { onLoad } from '@dcloudio/uni-app'
import { onMounted } from 'vue'
import type { Alarm } from '@/types/alarm'
import { ref } from 'vue'
const alarmList = ref<Alarm[]>()
//const renderList = ref<Alarm[]>([])
const startIndex = ref<number>(0)
const unReadAlarmCount = ref<number>(0)
const props = defineProps<{
  deviceNum: string
}>()

const finished = ref(false)
const getAlarmList = async () => {
  const { data } = await getAlarmListApi(props.deviceNum)
  unReadAlarmCount.value = data.unReadAlarmCount
  alarmList.value = data.alarms
  //handlePage()
}
/**模拟分页加载 */
// const handlePage = () => {
//   console.log(startIndex.value)
//   if (startIndex.value + 20 > alarmList.value.length) {
//     console.log('超过数组长度')
//     for (let i = 0; i < alarmList.value.length - startIndex.value; i++) {
//       renderList.value.push(alarmList.value[i + startIndex.value])
//     }
//     finished.value = true
//   } else {
//     for (let i = 0; i < 20; i++) {
//       renderList.value.push(alarmList.value[i + startIndex.value])
//     }
//     startIndex.value += 20
//   }
// }
onMounted(() => {
  getAlarmList()
})
const updateList = () => {
  //console.log('到底了')
  if (finished.value) {
    console.log('列表结束了')
    return
  }
  handlePage()
}
const showdetail = (alarmId, readFlg, title, time) => {
  /**设置未读为已读 */
  if (readFlg === 0) {
    setReadFlag(alarmId)
  }
  uni.navigateTo({
    url: `/pages/alarm/alarm-detail/alarm-detail?alarmId=${alarmId}&title=${title}&time=${time}`,
  })
}
/**处理警报时间格式 */
const handletime = (date: any) => {
  const Timestamp = new Date(new Date(date.replace(/-/g, '/')).getTime() + 8 * 60 * 60 * 1000)
  //console.log(Timestamp)
  const month =
    Timestamp.getMonth() + 1 < 10 ? '0' + (Timestamp.getMonth() + 1) : Timestamp.getMonth() + 1
  const day = Timestamp.getDate() < 10 ? '0' + Timestamp.getDate() : Timestamp.getDate()
  const hour = Timestamp.getHours() < 10 ? '0' + Timestamp.getHours() : Timestamp.getHours()
  const minute = Timestamp.getMinutes() < 10 ? '0' + Timestamp.getMinutes() : Timestamp.getMinutes()
  return Timestamp.getFullYear() + '-' + month + '-' + day + '\xa0' + hour + ':' + minute
}
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
const checkall = async () => {
  await setAllReadApi(props.deviceNum)
  //unReadAlarmCount.value = 0
  //renderList.value = []
  getAlarmList()
}
</script>

<template>
  <view class="content">
    <view class="title">
      <u-icon name="arrow-left" color="#ffff" size="22" @click="back"></u-icon>
      警报日志
    </view>
    <view class="checkall">
      <view>当前未读消息:</view>
      <view style="color: #3a9cff">{{ '\xa0\xa0' + unReadAlarmCount + '条' }}</view>
      <view style="display: flex; align-items: center; margin-left: auto" @click="checkall">
        <view style="margin-right: 9.615rpx; color: #3a9cff">全部标记已读</view>
        <img src="@/static/iv_select.png" alt="" class="checkall-button" />
      </view>
    </view>
    <scroll-view scroll-y class="scroll-view" :refresher-enabled="true" @scrolltolower="updateList">
      <view
        class="info-box"
        v-for="(item, index) in alarmList"
        :key="index"
        @click="showdetail(item.id, item.readFlg, item.title, handletime(item.time))"
      >
        <view style="margin-left: 19.231rpx; font-size: 30.769rpx; width: 605.769rpx">
          {{ handletime(item.time) + '\xa0 • \xa0' + item.title }}
        </view>
        <img v-if="item.readFlg === 0" src="@/static/iv_unread.png" class="unReadFlg" />

        <u-icon name="arrow-right" color="#cbcbcb" size="16"></u-icon>
      </view>
      <view
        v-if="finished"
        style="
          font-size: 26.923rpx;
          color: #aeb7bc;
          text-align: center;
          margin: 19.231rpx 0;
          padding-bottom: 28.846rpx;
        "
        >没有更多数据了</view
      >
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  font-family: PingFangSC-regular;
  overflow: hidden;
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: url(@/static/starry2.png) no-repeat;
    background-size: contain;
    .title {
      position: relative;
      padding-top: 115.385rpx;
      padding-bottom: 28.846rpx;
      font-size: 34.615rpx;
      color: #ffff;
      text-align: center;
      .u-icon {
        position: absolute;
        left: 3%;
      }
    }
    .checkall {
      padding-left: 19.231rpx;
      display: flex;
      align-items: center;
      margin-right: 28.846rpx;
      margin-top: 19.231rpx;
      font-size: 28.846rpx;
      font-weight: 700;
      .checkall-button {
        width: 44.231rpx;
        height: 32.692rpx;
        margin-left: auto;
      }
    }
    .scroll-view {
      overflow: hidden;
      padding-left: 19.231rpx;
      padding-right: 19.231rpx;
      box-sizing: border-box;
    }
    .info-box {
      display: flex;
      align-items: center;
      padding: 19.231rpx 0;
      height: 96.154rpx;
      border-bottom: 1.923rpx solid #dddddd;
      font-size: 28.846rpx;
      .unReadFlg {
        height: 30.769rpx;
        width: 48.077rpx;
        margin-right: 9.615rpx;
      }
      .u-icon {
        margin-left: auto;
      }
    }
  }
}
</style>
